<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/lib/cropper/cropper.css" />
    <link rel="stylesheet" href="/lib/layui/css/layui.css" />
    <link rel="stylesheet" href="/css/public.css" />
    <style>
      /* 封面容器的样式 */

      .cover-box {
        display: flex;
      }

      /* 左侧裁剪区域的样式 */

      .cover-left {
        width: 400px;
        height: 280px;
        overflow: hidden;
        margin-right: 20px;
      }

      /* 右侧盒子的样式 */

      .cover-right {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      /* 预览区域的样式 */

      .img-preview {
        width: 200px;
        height: 140px;
        background-color: #ccc;
        margin-bottom: 20px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="layui-card">
      <div class="layui-card-header">写文章</div>
      <div class="layui-card-body">
        <form action="" class="layui-form" lay-filter="edit-form">
          <div class="layui-form-item">
            <label class="layui-form-label">文章标题</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="title"
                required
                lay-verify="required"
                placeholder="请输入标题"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">文章类别</label>
            <div class="layui-input-block">
              <select name="cate_id" lay-verify="required">
                <option value="">请选择文章类别</option>
              </select>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">文章内容</label>
            <div class="layui-input-block">
              <textarea name="content" id=""></textarea>
            </div>
          </div>

          <div class="layui-form-item">
            <!-- 左侧的 label -->
            <label class="layui-form-label">文章封面</label>
            <!-- 选择封面区域 -->
            <div class="layui-input-block cover-box">
              <!-- 左侧裁剪区域 -->
              <div class="cover-left">
                <img
                  name="cover_img"
                  id="image"
                  src="/images/sample2.jpg"
                  alt=""
                />
              </div>
              <!-- 右侧预览区域和选择封面区域 -->
              <div class="cover-right">
                <!-- 预览的区域 -->
                <div class="img-preview"></div>
                <!-- 选择封面按钮 -->
                <input type="file" id="file" style="display: none" />
                <button
                  id="btn"
                  type="button"
                  class="layui-btn layui-btn-danger"
                >
                  选择封面
                </button>
              </div>
            </div>
          </div>
          <!-- 第五行：状态 -->
          <div class="layui-form-item">
            <label class="layui-form-label">文章状态</label>
            <div class="layui-input-block">
              <input type="radio" name="state" value="已发布" title="已发布" />
              <input
                type="radio"
                name="state"
                value="草稿"
                title="草稿"
                checked
              />
            </div>
          </div>
          <!-- 第六行：提交按钮 -->
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit lay-filter="formDemo">
                确认添加
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- 下拉框模板 -->
    <script type="text/html" id="tpl-class">
      {{each data val}}
      <option value="{{val.Id}}">{{val.name}}</option>
      {{/each}}
    </script>
    <!-- 下拉框模板 -->

    <script src="/lib/jquery.js"></script>
    <script src="/lib/layui/layui.all.js"></script>
    <script src="/lib/template-web.js"></script>
    <script src="/lib/cropper/Cropper.js"></script>
    <script src="/lib/cropper/jquery-cropper.js"></script>
    <script src="/lib/tinymce/tinymce.min.js"></script>
    <script src="/lib/tinymce/tinymce_setup.js"></script>
    <script src="/js/setAjax.js"></script>

    <script>
      //设置裁剪器
      let form = layui.form;
      var options = {
        // 宽高比
        aspectRatio: 400 / 280,
        autoCropArea: 1,
        // 设置预览区的选择器
        preview: ".img-preview",
      };
      var $image = $("#image");

      $image.cropper(options);

      //获取需要编辑的值的id
      let id = new URLSearchParams(location.search).get("id");
      console.log(id);

      //富文本编辑器插件

      // 动态添加分类
      $.ajax({
        url: "/my/article/cates",
        success: function (res) {
          if (res.status === 0) {
            let renderclass = template("tpl-class", res);
            $("select").append(renderclass);
            form.render();

            $.ajax({
              url: "/my/article/" + id,
              success: function (res) {
                form.val("edit-form", res.data);
                initEditor();
                // 更换图片
                $image
                  .cropper("destroy")
                  .attr(
                    "src",
                    "http://ajax.frontend.itheima.net" + res.data.cover_img
                  )
                  .cropper(options);
              },
            });
          }
        },
      });

      // 选择封面上传文件
      $("#btn").on("click", function () {
        $("#file").trigger("click");
      });

      //文件改变时改变图片
      $("#file").on("change", function () {
        let fileobj = this.files[0];
        let url = URL.createObjectURL(fileobj);
        $image.cropper("destroy").attr("src", url).cropper(options);
      });

      //点击确认添加发送ajax请求
      $("form").on("submit", function (e) {
        e.preventDefault();
        let data = new FormData(this);

        data.set("content", tinyMCE.activeEditor.getContent());
        data.append("Id", id);
        // 不要使用append，要使用set来更换原来的conten  t
        // 剪裁图片
        let canvas = $image.cropper("getCroppedCanvas", {
          width: 400,
          height: 280,
        });
        // 把canvas对象，转成
        canvas.toBlob(function (blob) {
          // 向FormData对象中，追加 cover_img
          data.append("cover_img", blob);
          // data.forEach((val,ind) => {
          //   console.log(ind,val);
          // })
          $.ajax({
            type: "post",
            url: "/my/article/edit",
            data: data,
            processData: false,
            contentType: false,
            success: function (res) {
              if (res.status === 0) {
                layer.msg(res.message);
                setTimeout(function () {
                  location.href = "/article/list.html";
                }, 500);
              }
            },
          });
        });
      });
    </script>
  </body>
</html>
